<template>
	<view>
		<!-- tab切换 -->
		<u-tabs height="100" font-size="34" active-color="#000000" inactive-color="#999999" bar-width="80"
			bar-height="14" :bar-style="{borderRadius:'14rpx',backgroundColor:'#07C160',bottom:'20rpx',zIndex:'0'}"
			:active-item-style="{zIndex:1}" :list="list" :is-scroll="true" :current="current" @change="change">
		</u-tabs>
		<!-- 余江茄子干 -->
		<template v-for="(item,Index) in childList">
			<view class="card-bg-w u-m-t-20" :key="item.id">
				<view class="u-font-34">{{ item.title }}</view>
				<view class="img-wrap">
					<image
						:src="item.thumbnail == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-17.png' : item.thumbnail"
						mode="widthFix"></image>
				</view>
				<u-read-more class="read-more" :shadow-style="shadowStyle" show-height="150" close-text="展开"
					:toggle="true">
					<rich-text :nodes="item.content"></rich-text>
				</u-read-more>
			</view>
		</template>
		<!-- 米粉蒸肉 -->
		<!-- <view class="card-bg-w u-m-t-20">
			<view class="u-font-34">米粉蒸肉</view>
			<view class="img-wrap">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-18.png" mode="widthFix"></image>
			</view>
			<u-read-more class="read-more" 
			:shadow-style="shadowStyle" 
			show-height="150" 
			close-text="展开"
			:toggle="true">
				<rich-text :nodes="content1"></rich-text>
			</u-read-more>
		</view> -->

	</view>

</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [
					// 	{
					// 	name: '商业集市'
					// }, {
					// 	name: '服装服饰'
					// }, {
					// 	name: '交通工具'
					// },
				],
				current: 0,
				content1: `余江茄子干是江西省余江县传统名特食品，据有关资料
记载，茄子干至今已有五百多年的生产加工历史。 《余
江县志》中有这样的文字记载:……茄子干香甜可口，辣
得恰到好处，更是余江的"特产"...`,
				content2: `南京夫子庙位于南京市秦淮区秦淮河北岸贡院街，是中
国第一所国家最高学府，也是中国四大文庙。这里是南
京小吃的发源地，也是南京小吃的集大成之地，是体验
老南京风味的绝佳去处。`,
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				},

				id: '',
				childList: []
			}
		},
		onLoad(options) {
			// console.log(options);
			this.id = options.id

			// 分类
			this.get_category_index()
		},
		methods: {
			change(index) {
				this.current = index;

				// 分类
				this.get_category_index()
			},

			// 美食街列表（16-美食物产）
			get_villages_foodie(village_id, category_id) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.villages_foodie,
					method: 'GET',
					data: {
						village_id,
						category_id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						this.childList = res.data.list
						console.log(this.childList);
					}
				})
			},

			// 分类
			get_category_index() {
				uni.showLoading({
					title: '加载中...'
				});
				let category = '美食物产'
				this.$http({
					url: this.api.category_index,
					method: 'GET',
					data: {
						type: category
					}
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						this.list = res.data
						// console.log(this.list[this.current],'00000000');
						// 美食街列表（16-美食物产）
						this.childList = []
						this.get_villages_foodie(this.id, this.list[this.current].category_id)

					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.img-wrap {
		width: 690rpx;
		// height: 400rpx;
		margin-top: 35rpx;
		margin-bottom: 30rpx;

		image {
			width: 690rpx;
			height: 400rpx;
		}
	}

	.read-more {
		/deep/ .u-content__showmore-wrap {
			justify-content: flex-start;
			width: 160rpx;
			height: 66rpx;
			background: #F7FEFC;
			border: 1px solid #07C160;
			border-radius: 33rpx;
			padding-bottom: 0;
			text-align: center;
			padding-left: 38rpx;

			text {
				font-size: 28rpx !important;
				color: #07C160 !important;
			}
		}

	}
</style>
<style>
	page {
		padding: 0;
		padding-bottom: 30rpx;
	}
</style>